<template>
  <div class="demo-wrapper">
    <el-tabs tab-position="left" style="height: 100%;" :value="activeMenuTab" @tab-click="tabClickChange">
      <!-- <el-tab-pane label="ElementUI文档" name="elementui">
        <ElementUIDocument></ElementUIDocument>
      </el-tab-pane> -->
      <el-tab-pane label="Colorbar" name="colorbar">
        <colorbar-demo></colorbar-demo>
      </el-tab-pane>
      <el-tab-pane label="消息滚动" name="scrollText">
         <scroll-text-demo :key="activeMenuTab == 'scrollText'"></scroll-text-demo>
      </el-tab-pane>
      <el-tab-pane label="上传" name="uplod">
        <upload-demo></upload-demo>
      </el-tab-pane>
      <el-tab-pane label="词云" name="rotateWord">
        <word-rotate-demo></word-rotate-demo>
      </el-tab-pane>
      <el-tab-pane label="表单控件组" name="formWidget">
        <input-list-demo></input-list-demo>
      </el-tab-pane>
      <el-tab-pane label="分页" name="paginator">
        <paginator-demo></paginator-demo>
      </el-tab-pane>
      <el-tab-pane label="表格" name="table">
        <table-demo></table-demo>
      </el-tab-pane>
      <el-tab-pane label="tab表格" name="tabTable">
        <tab-table-demo></tab-table-demo>
      </el-tab-pane>
      <el-tab-pane label="时间轴" name="timeline">
        <ls-time-line-demo ref="lsTimeLineDemo" :key="activeMenuTab == 'timeline'"></ls-time-line-demo>
      </el-tab-pane>
      <el-tab-pane label="颜色拾取器" name="colorPicker">
        <bootstrap-color-picker-demo></bootstrap-color-picker-demo>
      </el-tab-pane>
      <el-tab-pane label="excel导入" name="excelImport">
        <excel-import-demo></excel-import-demo>
      </el-tab-pane>
      <el-tab-pane label="图表指令" name="chart">
        <v-charts-demo ref="vChartRef" :key="activeMenuTab == 'chart'"></v-charts-demo>
      </el-tab-pane>
      <el-tab-pane label="form表单" name="formEditor">
        <form-view-demo></form-view-demo>
      </el-tab-pane>
      <el-tab-pane label="富文本编辑器" name="editor">
        <editor-demo></editor-demo>
      </el-tab-pane>
      <el-tab-pane label="axios二次封装" name="axios">
        <axios-demo></axios-demo>
      </el-tab-pane>
      <el-tab-pane label="tree组件" name="tree">
        <tree-view-demo :key="activeMenuTab == 'tree'"></tree-view-demo>
      </el-tab-pane>
      <el-tab-pane label="WebSocket" name="webSocket">
        <websocket-demo></websocket-demo>
      </el-tab-pane>
      <el-tab-pane label="标签筛选" name="tagFilter">
        <tag-filter-demo :key="activeMenuTab == 'tagFilter'"></tag-filter-demo>
      </el-tab-pane>
      <el-tab-pane label="Popover弹出框" name="popover">
        <popover-demo :key="activeMenuTab === 'popover'"></popover-demo>
      </el-tab-pane>
      <el-tab-pane label="图表操作示例" name="chartOperate">
        <v-chart-operate-demo :key="activeMenuTab === 'chartOperate'"></v-chart-operate-demo>
      </el-tab-pane>
      <el-tab-pane label="级联选择器" name="cascadeTree">
        <cascade-tree-demo></cascade-tree-demo>
      </el-tab-pane>
      <el-tab-pane label="复选框选择器" name="checkboxSelect">
        <checkbox-select-demo></checkbox-select-demo>
      </el-tab-pane>
      <el-tab-pane label="菜单弹框" name="contextMenu">
        <context-menu-demo></context-menu-demo>
      </el-tab-pane>
    </el-tabs>
    <div class="go-home" @click="goHome" title="返回首页">
      <i class="el-icon-setting"></i>
    </div>
  </div>
</template>
<script>
  import ElementUIDocument from "./ElementUIDocument";
  import FormViewDemo from "./FormViewDemo";
  import EditorDemo from "./EditorDemo";
  import TreeViewDemo from "./TreeViewDemo";
  import VChartsDemo from "./VChartsDemo";
  import WebsocketDemo from "./WebsocketDemo";
  import LsTimeLineDemo from "./LsTimeLineDemo";
  import ColorbarDemo from "./ColorbarDemo.vue";
  import ScrollTextDemo from "./ScrollTextDemo.vue";
  import UploadDemo from "./UploadDemo.vue";
  import WordRotateDemo from "./WordRotateDemo.vue";
  import InputListDemo from "./InputListDemo.vue";
  import PaginatorDemo from "./PaginatorDemo.vue";
  import TableDemo from "./TableDemo.vue";
  import TabTableDemo from "./TabTableDemo.vue";
  import BootstrapColorPickerDemo from "./BootstrapColorPickerDemo.vue";
  import ExcelImportDemo from "./ExcelImportDemo.vue";
  import AxiosDemo from "./AxiosDemo";
  import TagFilterDemo from "./TagFilterDemo";
  import PopoverDemo from "./PopoverDemo";
  import VChartOperateDemo from "./VChartOperateDemo";
  import CascadeTreeDemo from "./CascadeTreeDemo";
  import CheckboxSelectDemo from './CheckboxSelectDemo.vue';
  import ContextMenuDemo from './ContextMenuDemo';

  export default {
    name: 'demo',
    components: {
      ElementUIDocument,
      VChartOperateDemo,
      WebsocketDemo,
      VChartsDemo,
      EditorDemo,
      FormViewDemo,
      TreeViewDemo,
      LsTimeLineDemo,
      ColorbarDemo,
      ScrollTextDemo,
      UploadDemo,
      WordRotateDemo,
      InputListDemo,
      PaginatorDemo,
      TableDemo,
      TabTableDemo,
      BootstrapColorPickerDemo,
      ExcelImportDemo,
      AxiosDemo,
      TagFilterDemo,
      PopoverDemo,
      CascadeTreeDemo,
      CheckboxSelectDemo,
      ContextMenuDemo
    },
    data() {
      return {
        urls: {
          getTableHeaderUrl: './static/json/user-manage-header.json',
          getTableDataUrl: './static/json/user-manage-data.json',
          getTabTableDataUrl: './static/json/tab-table-data.json',
        },
        activeMenuTab: '',
        random:'',
      };
    },
    mounted() {
      this.tabClickChange({name: 'upload'});
    },
    methods: {
      tabClickChange(tab) {
        this.activeMenuTab = tab.name;
        this.$forceUpdate();
      },
      goHome(){
        this.router.push({path:'/pages/home'})
      },
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" >
  @import "../../assets/styles/base_style";

  // .demo-wrapper /deep/ .el-tabs__content,
  // .demo-wrapper /deep/ .el-tab-pane {
  //   &:after {
  //     @include clearFloat;
  //   }

   
  // }

  .demo-wrapper {
    width: 100%;
    height: 100%;
     .el-tabs__content{
      height: 100%;
    }
     .el-tab-pane{
      height: 100%;
    }
    position: relative;
    @include bg_color('body-bg');
    .component-example,
    .component-document {
      &:after {
        @include clearFloat;
      }
    }

    @media screen and (min-width: 1440px) {

      //左右显示
      .component-example {
        width: 50%;
        float: left;
        height: 100%;
        overflow: auto;
        @include scrollbarStyle(6px, 3px, #ccc, #58a1f3);

        .example {
          height: calc(100% - 100px);
          overflow: auto;
        }
      }

      .component-document {
        width: 50%;
        float: left;
        border-left: 2px dashed #abbbfa;
        height: 100%;
        overflow: auto;
        @include scrollbarStyle(6px, 3px, #ccc, #58a1f3);
      }
    }

    @media screen and (max-width: 1440px) {

      //上下显示
      .component-example {
        width: 100%;
        border-bottom: 2px dashed #abbbfa;
        height:400px;
      }

      .component-document {
        width: 100%;
      }

      .el-tab-pane {
        height: 100%;
        overflow: auto;
        @include scrollbarStyle(6px, 3px, #ccc, #58a1f3);
      }
    }

    .component-example {
      padding: 20px;

      .example-title {
        font-size: 18px;
        font-weight: bold;
        @include font_color('color-text-primary');
        @include bg_color('header-bg1');
        padding: 8px 10px;
        width: 100%;
        margin: 10px 0;
        border-radius: 3px;
      }

      .example {
        width: 100%;
        height:calc(100% - 44px);
        overflow: auto;
        .operate-button-group {
          margin: 0 0 20px 0;
        }
      }
    }
    .component-document {
      padding: 20px;

      .import-property,
      .output-method {
        clear: both;

        .prop-title {
          font-size: 18px;
          font-weight: bold;
          @include font_color('color-text-primary');
          @include bg_color('header-menu-hover');
          padding: 8px 10px;
          width: 100%;
          margin: 10px 0;
          border-radius: 3px;
        }

        .prop-lists {
          .prop-item {
            &:after {
              @include clearFloat;
            }

            padding: 6px;

            .prop-name {
              float: left;
              font-weight: bold;
              @include font_color('color-primary');
              font-size: 1.1rem;
            }

            .prop-desc {
              font-size: 1.1rem;
              float: left;
              @include font_color('color-text-primary');

              .sub-element-lists {
                .sub-lists {
                  .sub-item {
                    .sub-prop-name {
                      font-size: 0.9rem;
                      @include font_color('border-color-base');
                    }

                    .sub-prop-value {
                      font-size: 0.9rem;
                      @include font_color('color-text-regular');
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .go-home{
    position: absolute;
    right:20px;
    bottom:20px;
    width:40px;
    height:40px;
    text-align: center;
    vertical-align: middle;
    @include borderRadius(5px);
    @include bg_color('background-color-lighter');
    i{
      @include font_color('color-text-primary');
      font-size: $lFontSize;
    }
  }
</style>
